<!--
 * @Author: scl
 * @Date: 2023-09-13 14:25:26
 * @LastEditTime: 2023-09-17 18:15:20
 * @Description: file content
-->
<script setup lang="ts">
import CustomNavbar from '@/pages/index/components/CustomNavbar.vue';
import CategoryPanel from "@/pages/index/components/CategoryPanel.vue"
import hotPanel from './components/hotPanel.vue';
import PageSkeleton from '@/pages/index/components/PageSkeleton.vue'

import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

import { useGuessList } from '@/composables/index'
import { getBannerAPI } from '@/services/home'
import { getCategoryPanelAPI } from '@/services/home';
import { getHotPanelAPI } from '@/services/home'

import type { bannerItem } from '@/types/home'
import type { categoryPanelItem } from '@/types/home';
import type { hotPanelItem } from '@/types/home'
//轮播图
const bannerList = ref<bannerItem[]>([])
const getBannerData = async () => {
  const res = await getBannerAPI()
  bannerList.value = res.result
}
// 前台分类数据
const panelData = ref<categoryPanelItem[]>([])
const getCategoryData = async () => {
  const res = await getCategoryPanelAPI()
  panelData.value = res.result
}
// 热门推荐数据
const hotPanelData = ref<hotPanelItem[]>([])
const getHotPanelData = async () => {
  const res = await getHotPanelAPI()
  hotPanelData.value = res.result
}
const { guessRef, onScrolltolower } = useGuessList()
const istrigered = ref(false)
//自定义刷新
const onRefresherrefresh = async () => {
  istrigered.value = true
  guessRef.value?.resetPageParam()
  await Promise.all([getBannerData(), getCategoryData(), getHotPanelData()])
  istrigered.value = false
}

const isLoading = ref(true)
//页面加载
onLoad(() => {
  Promise.all([getBannerData(), getCategoryData(), getHotPanelData()])
  isLoading.value = false
})
</script>

<template>
  <CustomNavbar></CustomNavbar>
  <scroll-view :refresher-enabled="true" :refresher-triggered="istrigered" @refresherrefresh="onRefresherrefresh"
    @scrolltolower="onScrolltolower" scroll-y class="scroll-view">
    <PageSkeleton v-if="isLoading" />
    <template v-else>
      <XtxSwiper :list=bannerList />
      <CategoryPanel :list="panelData" />
      <hotPanel :list="hotPanelData" />
      <XtxGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
}
</style>
@/services/home@/services/home@/services/home